<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/lib/fontawesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/lib/mui/css/mui.css">
  <link rel="stylesheet" href="/css/index.css">
  <title>驴妈妈旅游</title>
</head>
<body>
  <!-- 头部 -->
  <header>
    <div  class="site">
        <span>上海</span>
        <i class="fa fa-caret-down"></i>
    </div>
    <span class="logo">驴妈妈旅游网</span>
    <img class="user" src="./images/icon/my.png" alt="">
  </header>

  <!-- 轮播图 -->
<div class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./images/img/banner7.jpg" /></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner1.jpg" alt=""></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner2.jpg" alt=""></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner3.jpg" alt=""></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner4.jpg" alt=""></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner5.jpg" alt=""></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner6.jpg" alt=""></a></div>
      <div class="mui-slider-item"><a href="#"><img src="./images/img/banner7.jpg" alt=""></a></div>
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./images/img/banner1.jpg" /></a></div>
    </div>
    <div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
  </div>
<!-- 导航 -->
<div class="nav">
  <a href="javascript:;"><img src="./images/icon/nav1.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/nav2.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/nav3.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/nav4.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/nav5.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/nav6.png" alt=""></a>
</div>
<!-- 出行导航 -->
<div class="trip">
  <a href="javascript:;"><img src="./images/icon/j1.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j2.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j3.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j4.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j5.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j6.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j7.png" alt=""></a>
  <a href="javascript:;"><img src="./images/icon/j8.png" alt=""></a>
</div>
<!-- 广告 -->
<div class="banner mui-clearfix">
  <a  class="mui-pull-left " href="javascript:;"><img src="./images/img/t1.jpg" alt=""></a>
  <a class="mui-pull-right " href="javascript:;"><img src="./images/img/t2.jpg" alt=""></a>
  <a  class="mui-pull-right " href="javascript:;"><img src="./images/img/t3.jpg" alt=""></a>
</div>
<!-- 热门活动 -->
<div class="hot_activity">
  <p class="hot_title">热门活动</p>
  <div class="hot_img">
    <a href="#"><img src="./images/img/r1.jpg" alt=""></a>
    <a href="#"><img src="./images/img/r2.jpg" alt=""></a>
    <a href="#"><img src="./images/img/r3.jpg" alt=""></a>
    <a href="#"><img src="./images/img/r4.jpg" alt=""></a>
  </div>
</div>
<!-- 度假 -->
<div class="holiday">
  <div class="holiday_title">
      <span class="weekend active">度周末</span>
      <span class="long_holidays">度长假</span>
  </div>
 <div class="content">
  <div class="holiday_content ">
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/zm1.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/zm2.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/zm3.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/zm4.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/zm5.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
  </div>
  <div class="holiday_content hide" >
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/tj1.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/tj2.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/tj3.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/tj4.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
    <a href="javascript:;">
      <img class="holiday_img" src="./images/img/tj5.jpg" alt="">
       <span class="holiday_sm">[热门活动]上海月亮船</span>
      <p class="holiday_lg" >听音乐，泡温泉，就找驴妈妈，全新玩法，全新问你，5折整点秒杀，立减高发哦100元</p>
    </a>
  </div>
 </div>
</div>
<!-- 加载更多 -->
<div class="more">
  <a href="javascript:;">加载更多 <i class="fa fa-angle-down"></i></a>
</div>

<!-- 底部 -->
<footer>
  <a class="sign " href="javascript:;">免费注册</a>
  <a class="login" href="javascript:;">登录</a>
  <a class="top " href="#top">TOP</a>
</footer>


</body>
<script src="/lib/zepto/zepto.js"></script>
<script src="/lib/mui/js/mui.min.js"></script>
<script src="/js/index.js"></script>
<script>
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
});
</script>
</html>